<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./js/vue2.js"></script>
    <script src="./js/qrcode.min.js"></script>
    <title>Document</title>
    <style>
        @page {
            margin: 0;
        }
        
        p {
            margin: 4px 0;
        }
        
        td {
            border: solid;
            border-width: 0px 1px 1px 0px;
            padding: 6px 8px;
            vertical-align: top;
        }
        
        table {
            margin-left: 2px;
            border: solid;
            border-width: 1px 0px 0px 1px;
            background-color: #FF7F00;
        }
        
        table div div {
            width: 100%;
            border-bottom: 1px solid;
        }
        
        .field {
            position: absolute;
        }
    </style>
</head>

<body>
    <div id='app' style="display: inline-block;">
        <table cellspacing="0" :style="{width: (370*size)+'px',height: (360*size)+'px',fontSize: 12*(1+(size-1)*0.5)+'px'}">
            <tr>
                <td colspan="2" style="text-align: center;vertical-align: middle;">危　险　废　物</td>
            </tr>
            <tr>
                <td :style="{height: (42*size)+'px'}">
                    <p>主要成份：{{d.wf.WfElement}}</p>
                    <p>化学名称：{{d.wf.WfChemicalName}}({{d.wf.WfTypeName}})</p>
                </td>
                <td rowspan="4" :style="{textAlign: 'center',padding:0,height: (160*size)+'px',verticalAlign: 'middle'}">
                    <p>危险类别</p>
                    <p><img v-for="(n,i) in imgs" :style="{width:imgs.length>1?(84*size+'px'):(100*size+'px')}" :src="n" alt="" srcset=""></p>
                </td>
            </tr>
            <tr>
                <td :style="{height: 40*size+'px'}">危险情况：{{d.wf.WfHazards}}</td>
            </tr>
            <tr>
                <td :style="{height: 40*size+'px'}">安全措施：{{d.wf.WfSecurityMeasure}}</td>
            </tr>
            <tr>
                <td rowspan="2" :style="{height: 100*size+'px',lineHeight:size+0.34}">
                    <p style="margin-left: 77px;">
                        <span style="margin-left: -77px;">废物产生单位：</span>
                    </p>
                    <p style="border-bottom: 1px solid;">
                        <span style="margin-left: -22px;margin-right: 20px;">:</span><span class="field">{{d.org.Name}}</span>
                    </p>
                    <p style="border-bottom: 1px solid;margin-left: 29px;">
                        <span style="margin-left: -29px;">地址：</span><span class="field">{{d.org.address||""}}</span>
                    </p>
                    <div style="display: flex;">
                        <p style="border-bottom: 1px solid;margin-left: 29px;width: 60%;">
                            <span style="margin-left: -29px;">电话：</span><span class="field">{{d.org.Telphone}}</span>
                        </p>
                        <p style="border-bottom: 1px solid;margin-left: 39px;width: 40%;">
                            <span style="margin-left: -39px;">联系人：</span><span class="field">{{d.org.Contacts}}</span>
                        </p>
                    </div>
                    <div style="display: flex;">
                        <p style="border-bottom: 1px solid;margin-left: 50px;width: 55%;">
                            <span style="margin-left: -50px;">产生日期：</span>{{(d.form.sys_CreateDate||"").split(" ")[0]}}
                            
                        </p>
                        <p style="border-bottom: 1px solid;margin-left: 29px;width: 45%;">
                            <span style="margin-left: -29px;">数量：</span><span class="field">{{((d.form.WfWeight||0)/1000).toFixed(4)}} 吨</span>
                        </p>
                    </div>
                    <p style="border-bottom: 1px solid;margin-left: 29px;">
                        <span style="margin-left: -29px;">批次：</span><span class="field">{{d.form.WfBatchNumber}}</span>
                    </p>
                </td>
            </tr>
            <tr>
                <td :style="{width: 100*size+'px'}">
                    <div id="qrcode"></div>
                </td>
            </tr>
        </table>
    </div>
</body>
<script>
    //引入ipcRenderer对象
    const {
        ipcRenderer
    } = require('electron')
    new Vue({
        el: "#app",
        data: {
            d: {
                wf: {},
                form: {
                    sys_CreateDate: ""
                },
                org: {}
            },
            qr: {},
            size:1
        },
        computed: {
            imgs() {
                let res = []
                if (this.d.wf.WfProperty) {
                    let ts = this.d.wf.WfProperty.toLocaleLowerCase().split(",");
                    ts.forEach(e => {
                        if (e) {
                            res.push(`./tag/${e}.png`);
                        }
                    })
                }
                return res;
            }
        },
        mounted() {
            this.qr = new QRCode(document.getElementById("qrcode"), {
                text: "无效的二维码",
                width: 100*this.size, //生成的二维码的宽度
                height: 100*this.size, //生成的二维码的高度
                colorDark: "#000000", // 生成的二维码的深色部分
                colorLight: "rgba(0,0,0,0)", //生成二维码的浅色部分
                correctLevel: QRCode.CorrectLevel.H
            });

            ipcRenderer.on('ping', (e, arr) => { //接收响应
                if(Number(arr.size)>=1){
                    this.size=Number(arr.size)
                }
                this.d = arr;
                //this.qr.clear();
                document.getElementById("qrcode").innerHTML=""
                //this.qr.makeCode(this.d.form.InboundCode || "无效的二维码");
                this.qr = new QRCode(document.getElementById("qrcode"), {
                    text: this.d.form.InboundCode || "无效的二维码",
                    width: 100*this.size, //生成的二维码的宽度
                    height: 100*this.size, //生成的二维码的高度
                    colorDark: "#000000", // 生成的二维码的深色部分
                    colorLight: "rgba(0,0,0,0)", //生成二维码的浅色部分
                    correctLevel: QRCode.CorrectLevel.H
                });
                ipcRenderer.sendToHost('pong') //向webview所在页面的进程传达消息
            })
        },
        methods: {}
    })
</script>

</html>